<template>
<div>
  <van-nav-bar
      title="意见反馈"
      left-arrow
      @click-left="onClickLeft"
  />
<!-- 选择项 -->
  <div >
    <ul class="crux">
      <li @click="setValue(item)" v-for="(item,index) in cruxList" :key="index">{{item}}</li>
    </ul>
  </div>
<!-- 输入框 -->
  <div class="putBox">
    <textarea placeholder="请输入意见反馈" style="width:100%;resize: none"></textarea>
    <div class="minImg">
      <div>1</div>
      <div>2</div>
    </div>
  </div>
  <van-button type="default" round block>提交</van-button>
  </div>
</template>

<script>
export default {
  name: "Feedback",
  data(){
    return{
      cruxList:['发货慢','态度不好','发货慢','态度不好','发货慢','态度不好']
    }
  },
  methods:{
    setValue(item){
      console.log(item)
    },
    onClickLeft(){
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
.crux{padding:0 20px;border-bottom:1px silver solid;color: white;overflow:hidden;li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;;float: left;text-align: center;border-radius:20px;background: #cccccc;padding:2px 10px;margin:6px 4px}}
.putBox{position:relative;overflow: hidden;width:100%;textarea{height:200px;text-indent: 2em;};.minImg{div{height:100%;width:48px;margin:0 4px};height:48px;width:100%;display: flex;justify-content: start;position:absolute;bottom:10px;left:0;}}
</style>